<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一键搜索</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../../assets/icons/iconfont.css">
    <link rel="stylesheet" href="../css/search.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 顶栏导航 begin -->
    <div class="layui-header">
        <div class="layui-logo">
            <img src="../images/logo.png" class="x-logo">
            <img src="../images/title.png" class="x-top-title">
        </div>
        <div class="layui-layout-right">
            <ul class="layui-nav x-top-nav">
                <li class="layui-nav-item active">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            首页
                        </div>
                        <i class="split-line"></i>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-qbyp.png">
                            情报研判系统
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-xxcj.png">
                            信息采集系统
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-xsaj.png">
                            刑事案件系统
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-ywgl.png">
                            运维管理系统
                        </div>
                    </a></li>
            </ul>
            <ul class="x-nav-user">
                <li class="layui-nav-item">
                    <dl class="x-user-info">
                        <dd class="x-user-photo">
                            <img src="../images/user.png">
                        </dd>
                        <dd class="x-user-text-box">
                            <span class="x-user-name">系统管理员：王要得</span>
                            <span class="x-user-score">积分：279</span>
                        </dd>
                        <dd class="x-user-logout">
                            <img class="nav-logout-icon" src="../images/nav/nav-logout.png">
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 顶栏导航 end -->

    <div class="content-limit">
        <!--内容主体区域-->
        <div style="background: url('../images/onekey-search.png');height: 232px;width: 100%;background-position: center;">
            <form action="" class="layui-form">
                <div class="layui-input-block key-search">
                    <select name="" lay-verify="required" style="height: 45px;">
                        <option value="1">全部</option>
                        <option value="2">请选择</option>
                        <option value="3">请选择</option>
                    </select>
                    <div class="layui-input-block keyinput-search">
                        <input type="text" name="title" lay-verify="title" autocomplete="off"
                               placeholder="请输入关键字进行搜索..."
                               class="layui-input search-input" style="height: 45px;">
                    </div>
                    <button class="layui-btn layui-btn-warm search-btn"><i class="iconfont icon-search search-icon"></i>搜索
                    </button>
                </div>
            </form>
        </div>
        <div class="search-content">
            <div class="search-table">
                <div class="table-title">
                    检索历史
                    <span class="pagenation">
                        <a href="javascript:void(0);"><i class="layui-icon layui-icon-left" id="pagePrev"></i></a>
                        <span style="color: #348EE1;" id="pageCurrent"></span>/<span id="pageCount"></span>
                        <a href="javascript:void(0);"><i class="layui-icon layui-icon-right" id="pageNext"></i></a>
                    </span>
                </div>
                <table class="layui-table" id="myTable">
                    <thead>
                    <tr style="background: #E3F6FF;">
                        <th style="width: 80px;">序号</th>
                        <th>关键字</th>
                        <th style="width: 199px;">时间</th>
                        <th>军官号</th>
                        <th>数据来源</th>
                        <th>资料类型</th>
                    </tr>
                    </thead>
                    <tbody>  <!--共10行数据-->
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>2016-11-29</td>
                        <td>654</td>
                        <td>会计法</td>
                        <td>空间管控</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>人生就像是一场修行</td>
                        <td>2016-11-29</td>
                        <td>于千万年之中，时间的无涯的荒野里…</td>
                        <td>于千万年之中，时间的无涯的荒野里…</td>
                        <td>于千万年之中，时间的无涯的荒野里…</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>人生就像是一场修行</td>
                        <td>2016-11-29</td>
                        <td>于千万年之中，时间的无涯的荒野里…</td>
                        <td>于千万年之中，时间的无涯的荒野里…</td>
                        <td>于千万年之中，时间的无涯的荒野里…</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>人生就像是一场修行</td>
                        <td>2016-11-29</td>
                        <td>于千万年之中，时间的无涯的荒野里…</td>
                        <td>于千万年之中，时间的无涯的荒野里…</td>
                        <td>于千万年之中，时间的无涯的荒野里…</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>人生就像是一场修行</td>
                        <td>2016-11-29</td>
                        <td>，于千万年之中，时间的无涯的荒野里…</td>
                        <td>，于千万年之中，时间的无涯的荒野里…</td>
                        <td>，于千万年之中，时间的无涯的荒野里…</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="cutoff-rule"></div>
            <div id="searchchart" class="search-chart"></div>
        </div>
    </div>
</div>


<script src="../../lib/layui/layui.all.js"></script>
<script src="../../lib/jquery-1.9.1.min.js"></script>
<script src="../../lib/echarts/echarts.js"></script>
<script>
    (function () {
        // 折线模拟数据
        var lineData = [
            {date: '02-15', number: '534'},
            {date: '02-16', number: '601'},
            {date: '02-17', number: '526'},
            {date: '02-18', number: '704'},
            {date: '02-19', number: '683'},
            {date: '02-20', number: '556'},
            {date: '02-21', number: '779'},
            {date: '02-22', number: '542'},
            {date: '02-23', number: '666'},
            {date: '02-24', number: '714'},
            {date: '02-25', number: '756'},
            {date: '02-26', number: '727'}
        ]
        // 分页参数
        var pages = {
            total: 234 // 数据总条数，一般通过服务数据得到
            , limit: 5 // 每页限制大小
            , page: 1 // 当前显示页面
        }

        var _fn = {
            // 绘制折线图表
            drapLine: function () {
                var myChart = echarts.init(document.getElementById('searchchart'));
                var lineX = []
                var lineNumber = []
                for (var i = 0; i < lineData.length; i++) {
                    lineX.push(lineData[i].date)
                    lineNumber.push(lineData[i].number)
                }
                var option = {
                    backgroundColor: '#FFFFFF',
                    tooltip: {
                        trigger: 'axis',
                        formatter: "2018-{b}{a}({c})"
                    },
                    grid: {
                        left: 0,
                        right: 0,
                        top: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    color: ['#a4d8cc', '#78d6ef'],
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 50,
                            formatter: function (params) {
                                var newParamsName = ""; // 最终拼接成的字符串
                                var paramsNameNumber = params.length; // 实际标签的个数
                                var provideNumber = 8; // 每行能显示的字的个数
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                                /**
                                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                                 */
                                // 条件等同于rowNumber>1
                                if (paramsNameNumber > provideNumber) {
                                    /** 循环每一行,p表示行 */
                                    var tempStr = "";
                                    tempStr = params.substring(0, 4);
                                    newParamsName = tempStr + "..."; // 最终拼成的字符串
                                } else {
                                    // 将旧标签的值赋给新标签
                                    newParamsName = params;
                                }
                                //将最终的字符串返回
                                return newParamsName
                            }

                        },
                        data: lineX
                    }],
                    yAxis: {
                        type: 'value',
                        min: 0
                    },
                    series: [
                        {
                            name: '访问量',
                            type: 'line',
                            areaStyle: {
                                normal: {
                                    type: 'default',
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(51, 153, 204,0.9)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(50, 118, 161,0.3)'
                                    }], false)
                                }
                            },
                            smooth: false,
                            showAllSymbol: true,
                            symbol: 'emptyCircle',
                            symbolSize: 10,
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        type: 'default'
                                    },
                                    borderWidth: 5,
                                    color: {
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: '#5A97C9'
                                            }
                                        ],
                                    }
                                }
                            },
                            data: lineNumber
                        }
                    ]
                };
                myChart.setOption(option);
            },
            /**
             * 加载表格
             * @param {array} d 显示数据
             */
            loadTable: function (d) {
                console.log(1)
                // 渲染表格  方式 参考 layui  layui.table
                // TODO：文档URL:  http://www.layui.com/doc/modules/table.html
                layui.layer.msg('表格数据更新, 第' + pages.page + '页,共有' + pages.pageCount + '页')
            },
            // 上一页
            handlePrev: function (callback) {
                if (pages.page > 1) {
                    pages.page -= 1
                    $('#pageCurrent').text(pages.page)
                    this.loadTable()
                    if (callback && typeof callback === 'function') callback()
                }
            },
            // 下一页
            handleNext: function (callback) {
                if (pages.page < pages.pageCount) {
                    pages.page += 1
                    $('#pageCurrent').text(pages.page)
                    this.loadTable()
                    if (callback && typeof callback === 'function') callback()
                }
            },
            // 分页初始化
            paging: function () {
                pages.pageCount = Math.ceil(pages.total / pages.limit)
                $('#pageCurrent').text(pages.page)
                $('#pageCount').text(pages.pageCount)
                $('#pagePrev').on('click', function () {
                    _fn.handlePrev()
                })
                $('#pageNext').on('click', function () {
                    _fn.handleNext()
                })
            },
            init: function () {
                this.drapLine()
                this.paging()
            }
        }

        // 初始化
        _fn.init()
    })();
</script>
</body>
</html>